<template>
	<view class="container">
		<u-navbar :is-back="true" back-text="返回" back-icon-color="#fff" :back-text-style="{ color: '#fff'}"
			:title="title" title-color="white" :background="background"></u-navbar>

		<u-toast ref="uToast" />
		<view class="detail">
			<view class="img">
				<u-image border-radius="10" width="100%" height="400rpx" mode="aspecFill" :src="activityDetail.img">
				</u-image>
			</view>
			<view class="atitle">
				<text>{{activityDetail.title}}</text>
			</view>
			<view class="view_wrap">
				<view class="view">
					<view class="looks">
						<u-icon name="eye" color="#99CC66"></u-icon>
						<text>{{activityDetail.views}}</text>
					</view>
					<view class="likes">
						<u-icon name="thumb-up" color="#FF666666"></u-icon>
						<text>{{activityDetail.likes}}</text>
					</view>

					<view class="unlikes">
						<u-icon name="thumb-down" color="#CC0033"></u-icon>
						<text>{{activityDetail.unlikes}}</text>
					</view>
					<view class="commentsIcon">
						<u-icon name="more-circle" color="#FFCCCC"></u-icon>
						<text>{{activityDetail.comments}}</text>
					</view>

				</view>
				<view class="time">
					{{activityDetail.createTime}}
				</view>
			</view>

			<view class="holdTime">
				<view class="htime">
					<u-icon name="clock" color="#ff6611" size="40"></u-icon>
					<text>{{activityDetail.time}}</text>
				</view>
				<view class="collections" @click="collectActivity">
					<u-icon name="star" :color="status.collection?'#ff6611':'#bbb'" size="40"></u-icon>
					<text>收藏数</text><text>{{activityDetail.collections}}</text>
				</view>
			</view>
			<view class="position">
				<u-icon name="map" color="#ff6622" size="40"></u-icon>
				<text>地点</text><text>{{activityDetail.position}}</text>
			</view>
			<view class="user_wrap">
				<view class="left">
					<u-image border-radius="10" width="150rpx" height="150rpx" mode="aspecFill"
						:src="activityDetail.avatar"></u-image>
				</view>
				<view class="right">
					<view class="top">
						<text>{{activityDetail.nickname}}</text>
					</view>
					<view class="middle">
						<view class="mleft">
							<u-icon name="level" color="#ffce1a" size="40"></u-icon>
							<text>{{activityDetail.cheats}}</text>
						</view>
						<view class="mright">
							称号：
							<text>{{prime}}</text>
						</view>
					</view>
					<view class="bottom">
						<text>{{activityDetail.sign}}</text>
					</view>

				</view>
			</view>

			<view class="detailTitle">
				<view class="dleft">
					<text>活动详情</text>
				</view>
				<view class="dright">
					<button open-type="share">分享</button>
				</view>
			</view>

			<view class="adetail">
				<view class="tags">
					<view v-for="(it,ind) in tags" :key="ind">
						<view class="item">
							{{it}}
						</view>
					</view>
				</view>
				<view class="content">
					{{activityDetail.detail}}
				</view>

			</view>

			<view class="comments">
				<view class="ctitle">
					<text>评论区</text>
				</view>
				<view class="commentContainer">
					<view class="vfor" v-for="(item,index) in commentList" :key="index">
						<view class="item_wrap">
							<view class="ileft">
								<view class="avatar">
									<u-image width="70rpx" height="70rpx" shape="circle" :src="item.avatar">
									</u-image>
								</view>
								<view class="nick">
									<text>{{item.nickname}}</text>
								</view>

							</view>
							<view class="iright">
								<view class="likes" @click="cAppreciate(item)">
									<u-icon name="thumb-up" size="40" :color="item.updateTime?'#ff6611':'#6c6c6c'">
									</u-icon>
									<text>{{item.likes}}</text>
								</view>

								<view class="unlikes" @click="cTread(item)">
									<u-icon name="thumb-down" size="40" :color="item.isread?'#ff6611':'#6c6c6c'">
									</u-icon>
									<text>{{item.unlikes}}</text>
								</view>
							</view>

						</view>
						<view class="ccontent">
							<text>{{item.content}}</text>
						</view>
						<view class="reply" @click="jumpToChildComment(item)">
							<text>{{item.replies}}条回复</text>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>


		</view>

		<view class="writeComments">
			<view class="write_wrap">
				<u-input v-model="writeContent" type="text" :border="false" class="writeContent" placeholder="写评论..."
					confirm-type="评论" @confirm="writeComment" />
			</view>
			<view class="zan" @click="zanActivity">
				<u-icon name="thumb-up" size="50" :color="status.appreciate?'#ff6611' : '#6c6c6c'"></u-icon>
			</view>
			<view class="cai" @click="caiActivity">
				<u-icon name="thumb-down" size="50" :color="status.tread?'#ff6611' : '#6c6c6c'"></u-icon>
			</view>
			<view class="collect" @click="collectActivity">
				<u-icon name="star" size="50" :color="status.collection?'#ff6611' : '#6c6c6c'"></u-icon>
			</view>
			<!-- <view class="share">
				<button open-type="share"><u-icon name="share" size="50" color="#6c6c6c"></u-icon></button>
			</view> -->

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '活动详情',
				background: {
					backgroundImage: 'linear-gradient(to right, #fa709a 0%, #fee140 100%)'
				},
				id: '',
				activityDetail: {},
				collectionColor: "#bbb",
				prime: '',
				tags: [],
				writeContent: '',
				commentList: [],
				status: {}
			}
		},
		onLoad(options) {
			console.log(options);
			this.id = options.id;
			//this.id = "1312356672992530434";
			this.init();

		},
		methods: {
			init() {
				this.$u.api.getDetailById({
					id: this.id
				}).then(res => {
					console.log(JSON.stringify(res));
					this.activityDetail = res.data;
					this.tags = this.activityDetail.label.split(",");
					// this.activityDetail.cheats;
					this.calPrime();
				})

				this.$u.api.getPCommentsByAid({
					aid: this.id
				}).then(res => {
					console.log(res);
					this.commentList = res.data;

					this.$u.api.getActivityUserStatus({
						aid: this.id
					}).then(res => {
						console.log(res);
						this.status = res.data;
						this.commentList.map((item, index) => {
							this.status.commentAppreciate[index] ? item.updateTime = true : item
								.updateTime = false;
							this.status.commentTread[index] ? item.isread = true : item.isread =
								false;
							return item;
						})
					})
				})


			},
			calPrime() {
				let cheats = this.activityDetail.cheats;
				if (cheats >= 0 && cheats < 100) {
					this.prime = "初入江湖";
				} else if (cheats >= 100 && cheats < 300) {
					this.prime = "江湖少侠";
				} else if (cheats >= 300 && cheats < 700) {
					this.prime = "后起之秀";
				} else if (cheats >= 700 && cheats < 1000) {
					this.prime = "武林高手";
				} else if (cheats >= 1000 && cheats < 2000) {
					this.prime = "英雄豪杰";
				} else if (cheats >= 2000 && cheats < 5000) {
					this.prime = "武林盟主";
				} else {
					this.prime = "独孤求败";
				}
			},
			writeComment() {
				this.$u.api.writeComment({
					aid: this.id,
					pid: 0,
					content: this.writeContent
				}).then(res => {
					console.log(res);
					if (res.msg === "评论成功") {
						this.writeContent = '';
						this.$refs.uToast.show({
							type: 'success',
							title: '评论成功'
						})
					} else {
						this.$refs.uToast.show({
							type: 'warning',
							title: '评论出错',
						})
					}
				})
			},

			collectActivity() {
				if (this.status.collection) {
					//已收藏
					this.$u.api.activityCollectCancel({
						aid: this.id
					}).then(res => {
						if (res.msg = "取消收藏成功") {
							this.status.collection = 0;
							this.activityDetail.collections--;
							this.$refs.uToast.show({
								type: 'success',
								title: '取消收藏成功'
							})
						}
					})
				} else {
					//未收藏
					this.$u.api.activityCollect({
						aid: this.id
					}).then(res => {
						console.log(res);
						if (res.msg == "收藏成功") {
							this.status.collection = 1;
							this.activityDetail.collections++;
							this.$refs.uToast.show({
								type: 'success',
								title: '收藏成功'
							})

						}
					})
				}

			},
			zanActivity() {
				//活动点赞
				if (this.status.appreciate) {
					//取消点赞
					this.$u.api.activityAppreciateCancel({
						aid: this.id
					}).then(res => {
						if (res.msg == "取消点赞成功") {
							this.status.appreciate = 0;
							this.activityDetail.likes--;
							this.$refs.uToast.show({
								type: 'success',
								title: '取消点赞成功'
							})
						}
					})
				} else {
					//点赞
					this.$u.api.activityAppreciate({
						aid: this.id
					}).then(res => {
						if (res.msg == "点赞成功") {
							this.status.appreciate = 1;
							this.activityDetail.likes++;
							if (this.status.tread) {
								this.status.tread = 0;
								this.activityDetail.unlikes--;
							}
							this.$refs.uToast.show({
								type: 'success',
								title: '点赞成功'
							})
						}
					})
				}
			},
			caiActivity() {
				//活动点踩
				if (this.status.tread) {
					//取消点踩
					this.$u.api.activityTreadCancel({
						aid: this.id
					}).then(res => {
						if (res.msg == "取消点踩成功") {
							this.status.tread = 0;
							this.activityDetail.unlikes--;
							this.$refs.uToast.show({
								type: 'success',
								title: '取消点踩成功'
							})
						}
					})
				} else {
					//点踩
					this.$u.api.activityTread({
						aid: this.id
					}).then(res => {
						if (res.msg == "点踩成功") {
							this.status.tread = 1;
							this.activityDetail.unlikes++;
							if (this.status.appreciate) {
								this.status.appreciate = 0;
								this.activityDetail.likes--;
							}
							this.$refs.uToast.show({
								type: 'success',
								title: '点踩成功'
							})
						}
					})
				}
			},

			cAppreciate(item) {
				if (item.updateTime) {
					//取消点赞
					this.$u.api.commentAppreciateCancel({
						cid: item.id
					}).then(res => {
						console.log(res);
						if (res.msg == "取消点赞成功") {
							item.updateTime = false;
							item.likes--;
							this.$refs.uToast.show({
								type: 'success',
								title: '取消点赞成功'
							})
						}
					})
				} else {
					//点赞
					this.$u.api.commentAppreciate({
						cid: item.id
					}).then(res => {
						console.log(res);
						if (res.msg == "点赞成功") {
							item.updateTime = true;
							item.likes++;
							if (item.isread) {
								item.unlikes--;
								item.isread = false;
							}
							this.$refs.uToast.show({
								type: 'success',
								title: '点赞成功'
							})
						}
					})
				}

			},
			cTread(item) {
				if (item.isread) {
					//取消点踩
					this.$u.api.commentTreadCancel({
						cid: item.id
					}).then(res => {
						console.log(res);
						if (res.msg == "取消点踩成功") {
							item.isread = false;
							item.unlikes--;
							this.$refs.uToast.show({
								type: 'success',
								title: '取消点踩成功'
							})
						}
					})
				} else {
					//点踩
					this.$u.api.commentTread({
						cid: item.id
					}).then(res => {
						console.log(res);
						if (res.msg == "点踩成功") {
							item.isread = true;
							item.unlikes++;
							if (item.updateTime) {
								item.likes--;
								item.updateTime = false;
							}
							this.$refs.uToast.show({
								type: 'success',
								title: '点踩成功'
							})
						}
					})
				}

			},
			jumpToChildComment(item) {
				uni.navigateTo({
					url:`comment?cid=${item.id}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		.detail {
			display: flex;
			flex-direction: column;
			width: 720rpx;
			margin: auto;

			.img {
				margin-top: 15rpx;

			}

			.atitle {
				font-size: 40rpx;
				font-weight: bold;
				color: #666666;
			}

			.view_wrap {
				display: flex;
				justify-content: space-between;
				margin-top: 10rpx;

				.view {
					display: flex;

					.looks {
						margin-right: 8rpx;

						text {
							margin-left: 3rpx;
							color: #999999;
						}
					}

					.likes {
						margin-right: 8rpx;

						text {
							margin-left: 3rpx;
							color: #999999;
						}
					}

					.unlikes {
						margin-right: 8rpx;

						text {
							margin-left: 3rpx;
							color: #999999;
						}
					}

					.commentsIcon {
						margin-right: 8rpx;

						text {
							margin-left: 3rpx;
							color: #999999;
						}
					}
				}

				.time {
					font-size: 27rpx;
					color: #999999;
				}
			}

			.holdTime {
				margin-top: 10rpx;
				display: flex;
				justify-content: space-between;

				.htime {
					display: flex;
					align-items: center;

					text {
						margin-left: 15rpx;
						color: #999999;
					}
				}

				.collections {
					display: flex;
					align-items: center;

					text {
						margin-left: 10rpx;
						color: #777777;
					}
				}
			}

			.position {
				margin-top: 20rpx;

				text {
					margin-left: 10rpx;
					color: #666666;
				}
			}

			.user_wrap {
				display: flex;
				margin-top: 20rpx;
				padding: 20rpx;
				border: 1rpx solid #f4f5f9;
				border-radius: 10rpx;
				box-shadow: 0 2px 2px rgba(10, 16, 20, .4), 0 0 2px rgba(10, 16, 20, .05);

				.left {
					width: 150rpx;
					height: 150rpx;
					margin-right: 20rpx;
					border-radius: 10rpx;
				}

				.right {
					flex: 1;

					.top {
						font-weight: bold;

						text {
							border-bottom: 2rpx solid grey;
							color: #555555;
						}
					}

					.middle {
						font-size: 27rpx;
						color: #777777;
						display: flex;
						justify-content: space-between;
						// background-color: red;
						height: 50rpx;
						text-items: center;
						margin-top: 5rpx;

						.mleft {}

						.mright {
							text {
								color: #ff6655;
							}
						}
					}

					.bottom {
						font-size: 25rpx;
						color: #777777;
					}
				}
			}

			.detailTitle {
				display: flex;
				justify-content: space-between;
				margin: 20rpx;
				align-items: center;

				.dleft {
					text {
						font-size: 35rpx;
						color: #ff6611;
						font-weight: bold;
						border-bottom: 5rpx solid #ff6611;
						padding-bottom: 10rpx;
					}
				}

				.dright {
					button {
						width: 150rpx;
						height: 50rpx;
						background-color: #89c636;
						color: white;
						font-size: 27rpx;
						border-radius: 25rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}

			.adetail {
				margin: 20rpx 0;
				padding: 20rpx;
				border: 1rpx solid #f4f5f9;
				box-shadow: 0 2px 2px rgba(10, 16, 20, .14), 0 0 2px rgba(10, 16, 20, .05);

				.tags {
					display: flex;
					width: 400rpx;
					white-space: nowrap;
					overflow: hidden;
					margin-bottom: 20rpx;

					.item {
						margin-right: 20rpx;
						background-color: rgba($color: #000000, $alpha: 0.08);
						padding: 5rpx 10rpx;
						border-radius: 5rpx;
						font-size: 25rpx;

					}
				}

				.content {
					color: #666666;
					text-indent: 2em;
				}
			}

			.comments {
				margin: 20rpx;

				.ctitle {
					text {
						font-size: 35rpx;
						color: #ff6611;
						font-weight: bold;
						border-bottom: 5rpx solid #ff6611;
						padding-bottom: 10rpx;
					}
				}

				.commentContainer {
					display: flex;
					flex-direction: column;
					margin-top: 20rpx;
					margin-bottom: 150rpx;

					.vfor {
						.item_wrap {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-top: 30rpx;

							.ileft {
								display: flex;
								align-items: center;

								.avatar {
									margin-right: 15rpx;

								}

								.nick {
									font-weight: bold;
									color: #666666;

									text {}
								}
							}

							.iright {
								display: flex;
								align-items: center;

								.likes {
									margin-right: 10rpx;


									text {
										margin-left: 5rpx;

									}
								}

								.unlikes {


									text {
										margin-left: 5rpx;

									}
								}
							}
						}

						.ccontent {
							margin-left: 85rpx;
							font-size: 27rpx;
							color: #666666;

						}

						.reply {
							margin-left: 85rpx;
							margin-top: 15rpx;

							text {
								background-color: #f4f4f4;
								padding: 8rpx 50rpx 8rpx 20rpx;
								margin-right: -40rpx;
								border-radius: 30rpx;
								font-size: 27rpx;

							}


						}
					}
				}
			}


		}

		.writeComments {
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			width: 750rpx;
			height: 100rpx;
			align-items: center;
			background-color: #fff;
			border-top: 1rpx solid #eee;
			padding: 0 25rpx;

			.write_wrap {
				.writeContent {
					background-color: #f4f4f4;
					height: 60rpx;
					align-items: center;
					border-radius: 30rpx;
					padding-left: 50rpx !important;
					width: 400rpx;
				}

			}

			.zan {
				// width: 100rpx;
				// display: flex;
				// justify-content: center;
				// align-items: center;
			}

			.cai {
				// width: 100rpx;
				// display: flex;
				// justify-content: center;
				// align-items: center;
			}

			.collect {
				// width: 100rpx;
				// display: flex;
				// justify-content: center;
				// align-items: center;
				margin-right: 20rpx;
			}

			// .share {
			// 	width: 100rpx;
			// 	display: flex;
			// 	justify-content: center;
			// 	align-items: center;
			// 	button{
			// 		background-color: rgba($color: #000000, $alpha: 0);
			// 		display: flex;
			// 		justify-content: center;
			// 		align-items: center;
			// 	}
			// 	button::after{
			// 		border: none;
			// 	}
			// }
		}
	}
</style>
